<template>
  <!-- 简单导航 -->
  <SimpleNav/>
  <section class="login-form">
    <!-- 定义一个容器、水平垂直居中 -->
    <main class="login-container">
      <div class="login-bg">
        <el-switch
            v-model="switchType"
            class="ml-2"
            inline-prompt
            size="large"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
            active-text="登录"
            inactive-text="注册"
        />
      </div>
      <div class="login-core">
        <div class="login-tab" @click="swtichTab">
          <span data-name="0" :class="{active: !is_staff}">普通用户</span>
          <span data-name="1" :class="{active: is_staff}">企业用户</span>
        </div>
        <!-- 显示登录组件 -->
        <div class="login-panel">
            <el-form :model="login" v-show="switchType" style="width: 100%">
              <el-form-item v-show="!is_staff">
                <el-input v-model="login.email" size="large" placeholder="请输入邮箱账号">
                  <template #suffix>
                    <el-icon :size="26">
                      <Message/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item v-show="is_staff">
                <el-input v-model="login.tel" size="large" placeholder="请输入手机账号">
                  <template #suffix>
                    <el-icon :size="26">
                      <PhoneFilled/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-input v-model="login.password" type="password" size="large" placeholder="请输入密码">
                  <template #suffix>
                    <el-icon :size="26">
                      <Unlock/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="login.rememberMe" size="large">30天自动登录</el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="large" style="width: 100%;" @click.prevent="onSubmitLogin">登录</el-button>
              </el-form-item>
              <a class="login-fda" @click="findPass">忘记密码，点我找回</a>
            </el-form>

            <el-form :model="form" v-show="!switchType"  style="width: 100%">
              <el-form-item v-show="!is_staff">
                <el-input v-model="form.email" size="large" placeholder="请输入邮箱账号">
                  <template #suffix>
                    <el-icon :size="26">
                      <Message/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item v-show="is_staff">
                <el-input v-model="form.tel" size="large" placeholder="请输入手机账号">
                  <template #suffix>
                    <el-icon :size="26">
                      <PhoneFilled/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="form.password" type="password" size="large" placeholder="请输入密码">
                  <template #suffix>
                    <el-icon :size="26">
                      <Unlock/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-input v-model="form.password2" type="password" size="large" placeholder="请再次输入密码">
                  <template #suffix>
                    <el-icon :size="26">
                      <Unlock/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-input v-model="form.name" size="large" placeholder="请输入真实姓名">
                  <template #suffix>
                    <el-icon :size="26">
                      <User/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item v-show="!is_staff">
                <el-select v-model="form.region" size="large" clearable placeholder="请选择班级">
                  <el-option label="python2402" value="1"/>
                  <el-option label="python2405" value="2"/>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" size="large" style="width: 100%;" @click.prevent="onSubmitRegister">注册</el-button>
              </el-form-item>
            </el-form>
        </div>

      </div>
    </main>
  </section>
</template>
<script>
import SimpleNav from '@/components/SimpleNav.vue'

export default {
  data() {
    return {
      is_staff: true, // 控制 普通用户 / 企业用户
      switchType: true, // 控制登录或注册
      login: {
        email: '',
        password: '',
        tel: "",
        rememberMe: true,
      },
      form: {
        email: "",
        tel: "",
        password: "",
        password2: "",
        name: "",
        clazz: null,
      }
    };
  },
  methods: {
    swtichTab(event) {
      if (event.target.nodeName === "SPAN") {
        this.is_staff = event.target.dataset.name === "1";
      }
    },
    onSubmitLogin() {
      // 实现用户登录
      this.$router.push({name: "home"})
    },
    onSubmitRegister() {
      // 使用用户注册
    },
    findPass() {
      this.$router.push({name: 'find-pwd', query: {is_staff: this.is_staff ? btoa('enterprise') : btoa('normal')}})
    }
  },
  components: {
    SimpleNav,
  }
};
</script>

<style scoped>


.login-form {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.login-container {
  width: 900px;
  height: 560px;
  background-color: #f0f0f0;
  display: flex;
  border-radius: 20px 0 0 20px;
}

.login-bg {
  position: relative;
  width: 300px;
  background: #333 url(../assets/task-login-bg.png) no-repeat center / 230%;
  border-radius: 20px 0 0 20px;
  box-shadow: 0 0 10px #000;
}

.login-core {
  flex: auto 1 1;
}

.login-tab {
  height: 120px;
  line-height: 120px;
  text-align: center;
  font-size: 18px;
}

.login-tab span {
  padding: 10px 30px;
  cursor: pointer;
  position: relative;
  margin: 0 5px;
}

.login-tab span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
}

.login-tab span.active::after {
  height: 4px;
  width: 100%;
  background-color: #5FB878;
  transition: all .5s;
}

.login-panel {
  padding: 30px 40px;
}

.login-fda {
  float: right !important;
  font-size: 14px;
}

.el-switch {
  position: absolute;
  right: -22px;
  top: 10px;
}
</style>